<template>
	<view>
		<view class="top">
			<image src="../../static/indexImage/logo.png" mode="" class="logo"></image>
			<u-search placeholder="搜索商品" v-model="goodsTitle" :show-action="false" @search="search"></u-search>
		</view>
		<u-tabs class="tabs_swiper" :list="list" :is-scroll="false" :current="current" @change="change" bar-width="60" active-color="#DA251D" font-size="32"></u-tabs>
		<scroll-view scroll-y :show-scrollbar="true" style="width: 100%;" @scrolltolower="onreachBottom">
			<vi<view class="project_list">
			<view v-for="(item, index) in projectList" :key="index">
				<view class="project_item" :id="item.id" @click="projectDetail(item.id)">
					<image :src="item.imgUrl" mode="" class="project_img"></image>
					<view class="project_info">
						<view class="project_title">
							<text>{{ item.title }}</text>
							<text class="price">￥{{ item.price }}/份</text>
						</view>
						<view class="director">导演：{{ item.director }}</view>
						<view class="introduce">{{ item.introduce }}</view>
						<view class="sale_box">
							<u-line-progress
								:active-color="item.sale >= 100 ? '#D5D6DC' : '#EC5F58'"
								:percent="item.sale"
								width="247"
								inactive-color="#FFEBEA"
								:show-percent="false"
								height="34"
							></u-line-progress>
							<view class="sale_number" :style="'color:' + (item.sale >= 100 ? '#D5D6DC' : '#F1736D')">
								{{ item.sale >= 100 ? '已售罄' : '已售' + item.sale + '%' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsTitle: '',
			list: [
				{
					name: '进行中'
				},
				{
					name: '预热中'
				},
				{
					name: '已结束'
				}
			],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			projectList: [
				{
					id: 0,
					imgUrl: '../../static/indexImage/11.png',
					title: '我和我的祖国',
					sale: 60,
					price: 5000,
					director: '陈凯歌',
					introduce: '该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。'
				},
				{
					id: 1,
					imgUrl: '../../static/indexImage/12.png',
					title: '囧妈',
					sale: 100,
					price: 5000,
					director: '徐峥',
					introduce: '该片讲述一趟六天六夜的莫斯科之旅，让徐伊万和卢小花母子回到了'
				},
				{
					id: 2,
					imgUrl: '../../static/indexImage/10.png',
					title: '中国机长',
					sale: 30,
					price: 5000,
					director: '刘伟强',
					introduce: '该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真'
				}
			],
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '已经没有更多了~~~'
			}
		};
	},
	onShow() {
		this.$http.post('Index/film',{state:this.current,nums:10,page:1}).then(async res => {
			console.log(res.data)
			
		})
	},
	methods: {
		search() {
			console.log(this.goodsTitle);
		},
		change(index) {
			this.current = index;
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			console.log('到底了');
		},
		projectDetail(id) {
			uni.navigateTo({
				url: '../projectDetail/projectDetail?id=' + id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:70upx 30upx 25upx 30upx;

	.logo {
		width: 71upx;
		height: 50upx;
		margin-right: 40upx;
	}
}
.tabs_swiper {
	box-shadow: 0px 4upx 8upx 0px rgba(4, 0, 0, 0.1);
}

.swiper-item {
	padding: 30upx;
	height: 100vh;
}
scroll-view {
	height: 78vh;
	padding: 30upx;
}
.project_item {
	display: flex;
	margin-bottom: 30upx;
	.project_img {
		width: 230upx;
		height: 300upx;
		border-radius: 15upx;
		margin-right: 20upx;
	}

	.project_info {
		width: 100%;
		flex: 1;
		.project_title {
			font-size: 32upx;
			margin-bottom: 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price {
				color: $red;
				font-weight: bold;
				font-size: 34upx;
			}
		}
		.director,
		.introduce {
			font-size: 30upx;
			color: $color-666;
			margin-bottom: 30upx;
		}
		.introduce {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /*这里填入需要几行省略*/
			overflow: hidden;
			line-height: 40upx;
		}
		.sale_box {
			display: flex;
			align-items: center;
			width: 100%;
			margin-bottom: 34upx;
			.sale_number {
				flex: 1;
				margin-left: 20upx;
				white-space: nowrap;
				font-size: 26upx;
			}
		}
		.recommend_box {
			display: flex;
			align-items: center;
			text {
				font-size: 26upx;
			}
		}
	}
}
</style>
